<!-- 
2.4.4版本之后 @change可以current-page 或 page-size 更改时触发
调用该组件的业务放可以直接 @change处理分页数据
 -->
<template>
	<div class="pagination-wrap haha mt-18px">
		
		<el-pagination 
		:current-page="pageInfo.currentPage" 
		:page-size="pageInfo.pageSize" 
		:layout="layout" 
		:total="pageInfo.total"
		:background="background"
		 @size-change="sizeChange"
		 @current-change="currentChange" />
	</div>
</template>
<script setup>
	import { computed, ref } from 'vue'
	defineOptions({
		name: 'pagination',
		inheritAttrs: true,
	})
	const props = defineProps({
		pageInfo:{
			type: Object,
			default(){
				return {
					currentPage: 0,
					pageSize: 0,
					total: 0,
				}
			}
		},
		layout:{
			type: String,
			default: "prev, pager, next, sizes, jumper",
		},
		background:{
			type: Boolean,
			default: true
		}
	})
/* 	const pageData = ref({
		currentPage: 1,
		pageSize: 10,
		total: 500
	}) */
	const emit = defineEmits(['change'])
	/* const currentPage = computed({
		get() {
			console.log('computed.currentPage',pageData);
			return pageData.value.currentPage
		},
		set(newValue) {
			console.log('computed.newValue',newValue);
			pageData.value.currentPage = newValue
		}
	})
	const pageSize = computed({
		get() {
			console.log('computed.pageSize',pageData);
			return pageData.value.pageSize
		},
		set(newValue) {
			console.log('computed.newValue',newValue);
			pageData.value.pageSize = newValue
		}
	})
	const sizeChange = (pageSize) => {
		pageData.value.pageSize = pageSize
	}
	const currentChange = (currentPage) => {
		pageData.value.currentPage = currentPage
	} */
	const sizeChange = (pageSize) => {
		let pageInfo = {currentPage:props.pageInfo.currentPage,pageSize:pageSize}
		// console.log('sizeChange:pageInfo',pageInfo);
		emit("change", pageInfo)
	}
	const currentChange = (currentPage) => {
		let pageInfo =  {currentPage:currentPage,pageSize:props.pageInfo.pageSize}
		// console.log('currentChange:pageInfo',pageInfo);
		emit("change",pageInfo)
	}
</script>
<style>
	.haha{
		background-color: black !important;
	}
	.pagination-wrap{
		background-color: black !important;
	}
</style>